import React from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import '../custom/customComponents.css';

interface SkeletonLoaderProps {
  type?: 'text' | 'card' | 'avatar' | 'paragraph' | 'image';
  width?: string | number;
  height?: string | number;
  count?: number;
  className?: string;
}

const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
  type = 'text',
  width = '100%',
  height = '1em',
  count = 1,
  className = ''
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const getSkeletonClasses = () => {
    const classes = ['skeleton-loader', type];
    
    if (className) {
      classes.push(className);
    }
    
    return classes.join(' ');
  };

  const renderSkeleton = (index: number) => (
    <div
      key={index}
      className={getSkeletonClasses()}
      style={{
        width: type === 'avatar' ? height : width,
        height: type === 'text' || type === 'paragraph' ? '1em' : height,
        marginBottom: type === 'paragraph' ? '0.5em' : '0'
      }}
    />
  );

  if (type === 'paragraph') {
    return (
      <div className="skeleton-paragraph">
        {Array.from({ length: count }).map((_, index) => (
          <div key={index} className="skeleton-paragraph-line">
            {renderSkeleton(index)}
          </div>
        ))}
      </div>
    );
  }

  return (
    <div>
      {Array.from({ length: count }).map((_, index) => renderSkeleton(index))}
    </div>
  );
};

export default SkeletonLoader;